<DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章测试</title>
</head>
<body>
<p>我之前使用的主题是 handsome，handsome 也是一款不错的 Typecho 主题。但是因为 handsome 使用的人太多，再加上有特别需求，所以我准备开发一套自用的主题。</p>
<p>看了一下 Typecho 的主题开发文档， 发现不是太难。于是花了几天时间开发了这个主题。</p>
<p>这是我第一次开发 <a href='http://typecho.org/'>Typecho</a> 的主题，可能还有很多地方还不够完善，后续还会有更新。</p>
<p>主题演示地址：<a href='https://www.misterma.com'>https://www.misterma.com</a> </p>
<p>主题下载地址：<a href='https://github.com/changbin1997/MWordStar/releases'>https://github.com/changbin1997/MWordStar/releases</a></p>
<p>Releases 中打包的主题可能不是最新版本，如果您需要下载最新版本的主题可以直接克隆项目。</p>
<p>下面是主题首页截图：</p>
<p><img src="https://www.misterma.com/img/MWordStar%E4%B8%BB%E9%A2%98%E9%A6%96%E9%A1%B5%E6%88%AA%E5%9B%BE1.png" referrerpolicy="no-referrer" alt="MWordStar主题首页截图1"></p>
<p><img src="https://www.misterma.com/img/MWordStar%E4%B8%BB%E9%A2%98%E9%A6%96%E9%A1%B5%E6%88%AA%E5%9B%BE2.png" referrerpolicy="no-referrer" alt="MWordStar主题首页截图2"></p>
<p><img src="https://www.misterma.com/img/MWordStar%E6%97%A0%E5%9B%BE%E6%A8%A1%E5%BC%8F.png" referrerpolicy="no-referrer" alt="MWordStar主题首页不包含文章头图"></p>
<h2>主题特点</h2>
<ul>
<li>响应式设计</li>
<li>无障碍适配</li>
<li>代码高亮</li>
<li>丰富的设置选项</li>
<li>良好的 SEO 优化</li>
<li>长期维护</li>
<li>详细的 <a href='https://www.misterma.com/archives/819/'>使用说明</a>（必看）</li>

</ul>
<h2>主题介绍</h2>
<h3>外观设计</h3>
<p>因为本人不擅长设计，所以外观还是传统的两栏布局。</p>
<h3>主题依赖</h3>
<p>主题主要用到了一下几个库和框架：</p>
<ul>
<li><a href='https://getbootstrap.com/'>Bootstrap</a>  外观和布局</li>
<li><a href='https://jquery.com/'>jQuery</a>  DOM 操作</li>
<li><a href='https://highlightjs.org/'>highlight.js</a>  代码高亮</li>
<li><a href='https://icomoon.io/'>IcoMoon</a>  字体图标</li>

</ul>
<p>其中 IcoMoon 的字体图标是可定制的，所以只包含了主题中出现的图标。</p>
<h3>主题文件结构</h3>
<pre><code class='language-shell' lang='shell'>.
├── 404.php
├── archive.php
├── comments.php
├── css
│   ├── bootstrap.min.css
│   ├── icon.css
│   ├── style.css
│   └── vs2015.css
├── fonts
│   ├── icomoon.eot
│   ├── icomoon.svg
│   ├── icomoon.ttf
│   └── icomoon.woff
├── footer.php
├── functions.php
├── header.php
├── index.php
├── js
│   ├── app.js
│   ├── bootstrap.min.js
│   ├── highlight.pack.js
│   └── jquery-3.4.1.min.js
├── LICENSE
├── page-archive.php
├── page-links.php
├── page.php
├── post.php
├── screenshot.jpg
└── sidebar.php
</code></pre>
<p>注意！上面的文件结构是已经打包压缩的文件结构，在 <a href='https://github.com/changbin1997/MWordStar/releases'>Releases</a> 下载的 <code>zip</code> 包就是经过打包压缩的。</p>
<p>如果要下载未压缩的源代码可以直接克隆项目，未压缩的源代码的 style 文件是 <code>scss</code> 格式的，需要用 <a href='https://sass-lang.com/'>Sass</a> 编译为 <code>css</code> 才能使用。</p>
<h3>主题安装</h3>
<p>把主题上传到 Typecho 的 <code>usr/themes/</code> 目录，然后解压，你也可以先解压在上传。</p>
<p>解压后需要保证 <code>themes</code> 目录下 有一个 <code>MWordStar</code> 目录。</p>
<p>登录 Typecho 的后台管理，进入 <code>控制台</code> -&gt; <code>外观</code>，如果看到 <strong>MWordStar</strong> 就点击 <code>启用</code>。</p>
<h3>代码高亮</h3>
<p>代码高亮的样式使用的是 VS2015 的暗色主题，和 Visual Studio Code 的默认主题差不多。主题支持 30 多种语言的代码高亮。详细的说明可以查看 <a href='https://www.misterma.com/archives/819/'>使用说明</a> 。</p>
<h3>友情链接</h3>
<p>友情链接分为 <code>全站友情链接</code>、<code>首页友情链接</code>、<code>内页友情链接</code>。<code>全站友情链接</code> 会在每个页面的侧边栏显示，<code>首页友情链接</code> 会在首页的侧边栏显示，<code>内页友情链接</code> 只会在 友情链接 的页面显示。</p>
<p>如需查看友情链接的设置说明可以访问：<a href='https://www.misterma.com/archives/819/'>使用说明</a> 。</p>
<h3>无障碍</h3>
<p>上网对于大多数人来说是一件再简单不过的事，但是对于一些身体有缺陷的残障人士来说却是一件非常困难的事。</p>
<p>目前国内的很多网站都只注重外观，忽略了残障人士的可访问性。但是想要做好网站的用户体验，<a href='https://www.misterma.com/archives/264/'>无障碍</a> 适配肯定是少不了的。</p>
<p>本主题专门为 屏幕阅读器 做了特别优化，并 在 <a href='http://www.nvda-project.org/'>NVDA</a> 和 <a href='https://www.apple.com/cn/accessibility/iphone/vision/'>VoiceOver</a> 这两款屏幕阅读器上做过测试，无论是 PC 还是 移动设备 都能完美朗读。主题颜色对比度也符合标准。</p>
<p>小提示：如果您是屏幕阅读器用户，为了您的浏览体验，不建议使用 IE 浏览器。</p>
<h3>Emoji 表情</h3>
<p>主题评论区包含一个 Emoji 表情面板，您可以在后台启用或禁用。Emoji 表情面板包含 1466 个表情，这些表情都是按照分类动态加载的，您不用担心性能问题。</p>
<p>Emoji 表情面板也进行了无障碍适配，可支持键盘访问和屏幕阅读器朗读。</p>
<p>下面是 Emoji 表情面板的截图：</p>
<p><img src="https://www.misterma.com/img/emoji%E9%9D%A2%E6%9D%BF.jpeg" referrerpolicy="no-referrer" alt="emoji面板截图"></p>
<h3>兼容性</h3>
<p>因为本主题使用了 HTML5 和 CSS3，需要 IE10 及以上浏览器才能完美兼容。IE8 及以下浏览器显示可能会出现一些问题。</p>
<h3>插件适配</h3>
<p>因为本人很少使用插件，所以目前适配的插件比较少。</p>
<p>下面是已适配的插件：</p>
<ul>
<li><a href='https://plugins.typecho.me/plugins/sticky.html'>Sticky</a> 文章置顶插件</li>

</ul>
<h2>使用 Webpack 构建</h2>
<p>在 <a href='https://github.com/changbin1997/MWordStar'>MWordStar</a> 仓库和 <a href='https://github.com/changbin1997/MWordStar/releases'>Releases</a> 中的主题是直接通过 <code>link</code> 和 <code>script</code> 引入 CSS 和 JS 文件，没有使用任何构建工具。</p>
<p>下面是用到的 CSS 和 JS 文件说明：</p>
<ul>
<li><code>bootstrap.min.css</code>：Bootstrap 的 CSS 文件，这个 CSS 是被我修改过的。</li>
<li><code>icon.css</code>：字体图标的 CSS 文件。</li>
<li><code>style.css</code>：主题的样式文件。</li>
<li><code>style.scss</code>：主题的 SASS 样式文件，在 <a href='https://github.com/changbin1997/MWordStar/releases'>Releases</a> 中下载的主题不包含 SASS 文件。</li>
<li><code>vs2015.css</code>：highlight.js 的样式文件。</li>
<li><code>jquery-3.4.1.min.js</code>：jQuery。</li>
<li><code>bootstrap.min.js</code>：Bootstrap 的 JS 文件。</li>
<li><code>highlight.pack.js</code>：highlight.js 的 JS 文件。</li>
<li><code>app.js</code>：主题的 JS 文件。</li>

</ul>
<p>除了上面的 CSS 和 JS 外 <code>icon.css</code> 还需要加载 4 个字体文件。虽然这些文件都不大，但是需要发送很多次 HTTP 请求。Webpack 可以把上面的 CSS、JS、字体 打包成一个 CSS 文件和一个 JS 文件，只需要发送两次 HTTP 请求就可以加载上面的文件。</p>
<p>如果您对前端和 Webpack 有一定了解的话，您可以使用 Webpack 构建。您可以在 <a href='https://github.com/changbin1997/MWordstar-Web'>https://github.com/changbin1997/MWordstar-Web</a> 中找到使用 Webpack 构建的版本。</p>
<p>在仓库的 <code>README.md</code> 中有详细的打包说明。</p>
<p>如果您对 Webpack 感兴趣的话，可以看一下 <a href='https://www.misterma.com/archives/850/'>Webpack 简易使用指南</a></p>
<h2>其它</h2>
<p>主题 Github：<a href='https://github.com/changbin1997/MWordStar'>https://github.com/changbin1997/MWordStar</a></p>
<p>码云仓库地址：<a href='https://gitee.com/changbin1997/MWordStar'>https://gitee.com/changbin1997/MWordStar</a></p>
<p>本主题使用 <a href='https://github.com/changbin1997/MWordStar/blob/master/LICENSE'>MIT License</a> 开源。</p>
<p>如果您在使用本主题时遇到 Bug 或有任何问题和建议都可以在 <a href='https://www.misterma.com/archives/812/#comments'>博客评论区</a> 留言，也可以在 Github 的 <a href='https://github.com/changbin1997/MWordStar/issues'>issues</a> 反馈。</p>
<p>一般情况下在博客留言可以很快得到回复。</p>
<p>本项目需要感谢 <a href='https://www.jetbrains.com/?from=MWordStar'>JetBrains</a> 提供的免费开发工具。</p>
</body>
</html>